<template>
	<view class="bg-white ">
		<view class="padding-sm ">
			<radio-group class="block" @change="RadioChange">
				<view :key="item.paycheckId" v-for="(item, index) in payList" @click="itemChange(item)">
					<view class="margin-top cz-solid padding" v-if="index!=payList.length-1">
						<view class="flex">
							<view class="flex-treble cz-text">{{item.paycheckDesc}}</view>
							<view class="flex-sub  text-right">
								<radio :checked="curPay.paycheckNum==item.paycheckNum?true:false" :value="item.paycheckNum+''"></radio>
							</view>
						</view>
						<view v-if="item.memberFlg == '1'">成为会员，邀请好友，送积分，送金币</view>
						
					</view>
					<view class="margin-top  cz-solid " v-else>
						<view class="yh-header cz-text-red ">限时特惠</view>
						<view class="flex  padding-top-sm padding-left padding-right">
							<view class="flex  czd-text">
								充值 <text class="text-red text-xl margin-left-xs margin-right-xs">{{item.paycheckNum}} </text> 元，{{item.paycheckRemark}} 
								<text class=" text-red">（0.5元/天）</text>
							</view>
							<view class="flex-sub text-green  text-right ">
								<radio :checked="curPay.paycheckNum==item.paycheckNum?true:false" :value="item.paycheckNum+''"></radio>
							</view>
						</view>
						<view class="yh-bottom">成为VIP会员，邀请好友，送积分，巨额返现</view>
					</view>
				</view>
			</radio-group>

			<view class="margin-top">
				<view class="padding-lr cz-text">支付： <text class="cz-text-red text-xl padding-left-xs padding-right-xs">{{curPay.paycheckNum}}</text>
					元，{{curPay.paycheckRemark}}</view>
			</view>
			<view class="cz-border"></view>
			<!-- <view class="bottom-border"></view> -->
			<view class="margin-top flex solid padding-sm">
				<!-- <view class="flex-treble cz-text">充值899元，一年内无限查看</view> -->
				<!-- <view class="flex-sub"  ></view> -->
				<view>
					<image style="height: 60px;width:60px;" src="../../static/pay.jpg" mode="aspectFit"></image>
				</view>
				<view class="padding-left-xs padding-top-xs">
					<view class="text-black text-bold text-lg">
						微信支付
					</view>
					<view class="text-gray padding-top-xs">亿万用户的选择，更快更安全</view>
				</view>
			</view>

			<button @click="creatOrder" class=" bg-green margin-top lg">确认支付</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				payList: [],
				curPay: {
					paycheckNum: '89',
					paycheckDesc: '365天内任意查看',
					paycheckId: '',
					paycheckRemark: '',
				},
			};
		},
		onLoad(option) {
			//获取充值类型
			this.getPayTypeList();
		},
		methods: {
			getPayTypeList() {
				uni.showLoading({
					mask: true,
					title: '请稍候...'
				})
				let _this = this;
				this.baseRequest('api/driver/recharge/note', 'GET', {}, function(res, info) {
					uni.hideLoading();
					if (res) {
						_this.payList = res;
						_this.curPay = _this.payList[3]
					}
				});
			},
			RadioChange(e) {
				let idx = this.payList.findIndex(t => t.paycheckNum == e.detail.value)
				this.itemChange(this.payList[idx]);
			},
			itemChange(p) {
				this.curPay = p;
			},
			creatOrder() {
				let type = '0';  //1-微信里打开支付，0-手机自带浏览器H5支付， 2-原生安卓App支付
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {  
					type = '1';
				}
				let data = {
					paycheckNum: this.curPay.paycheckNum,
					paycheckId: this.curPay.paycheckId,
					type: type,
					orderType: 0
				};
				let _this = this;
				var timestamp = Date.parse(new Date());
				this.baseRequest('api/driver/recharge/gold', 'POST', data, function(res, info) {
					var ua = window.navigator.userAgent.toLowerCase();
					if (ua.match(/micromessenger/i) == 'micromessenger') {  
						// 支付
						_this.$wx.wxpay(res, function(r) { 
							if(r.errMsg == 'chooseWXPay:ok'){
								uni.showLoading({
									title: '请稍候'
								})
								setTimeout(()=>{
									window.location.href = res.mweb_url + '&time='+timestamp;
								}, 1000)
								/*
								uni.redirectTo({
									//支付成功转到支付成功提示页面  
									url: '/pages/user/payres'
								})  
								*/
							}else{
								
							}
						});
					} else {  
					    uni.showLoading({
					    	title: '请稍候'
					    })
					    setTimeout(()=>{
							uni.hideLoading();
					    	window.location.href = res.mweb_url + '&time='+timestamp;
					    }, 1000)
					}  
				});
							/*
							{"code":1,"data":{"nonce_str":"UsF4VYDpSQ3ER7z6",
							"mweb_url":"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2718044440676899eb9d39dc1932416100&package=861646412&redirect_url=https%3A%2F%2Frentcat.51zhonglv.cn%2F%23%2Fpages%2Fcomponent%2Fpay%3Ftype%3D1",
							"appid":"wx8e5689e59b406c1a",
							"sign":"4C47A15E6A37A427A92D84E7A9311C88",
							"trade_type":"MWEB",
							"return_msg":"OK",
							"result_code":"SUCCESS",
							"mch_id":"1551357071",
							"return_code":"SUCCESS",
							"pay_url":"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2718044440676899eb9d39dc1932416100&package=861646412",
							"redirect_url":"https://rentcat.51zhonglv.cn/pages/component/pay?type=1",
							"prepay_id":"wx2718044440676899eb9d39dc1932416100"},
							"success":true,
							"info":"default info"}
							*/
			},
		}
	}
</script>

<style>
	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.cz-text-red {
		color: #e54d42;
	}

	.yh-header {
		color: #e54d42;
		padding-top: 20upx;
		padding-left: 20upx;
	}

	.yh-bottom {
		padding-left: 30upx;
		padding-bottom: 20upx;

	}

	.czd-text {
		color: #101010;
	}

	.czsd-text {
		font-size: 32.94rpx;
	}

	.cz-text {
		color: #101010;
	}

	.cz-wx {
		font-size: 36upx;
		color: #000000;
	}

	.cz-solid {
		border: solid 1px #b6b6b6;
	}

	.cz-border {
		margin: 20upx;
		border: solid 1px #BBBBBB;
	}
</style>
